<template>
<div class="ProductionBase">
    <!-- <ImportXlsx title="主体导入" type="subject" :ImportXlsxShow="ImportXlsxShow"></ImportXlsx> -->

    <el-dialog title="主体导入" :visible.sync="ImportXlsxShow" width="30%">
        <el-form>
            <el-form-item label="文件导入">
                <UploadSubjectFiles v-if="ImportXlsxShow"></UploadSubjectFiles>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="ImportXlsxShow = false">取 消</el-button>
            <el-button type="primary" @click="ImportXlsxShow = false">确 定</el-button>
        </div>
    </el-dialog>

    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" class="demo-form-inline messageInput">
                    <el-form-item label="主体名称">
                        <el-input v-model="searchData.subjectName" maxlength="30" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item class="status" label="主体类型">
                        <el-select placeholder="请选择(个体户、合作社、企业)" v-model="searchData.subjectType">
                            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="镇街">
                        <el-select v-model="searchData.subjectTownId" placeholder="选择镇街" @change="changeTownCode">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="村居">
                        <el-select v-model="searchData.subjectVillageId" placeholder="选择村居" @change="changeVillageCode">
                            <el-option v-for="(item, index) in VillageOptions" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="地址" class="form_right">
                        <el-input v-model="searchData.subjectAddr" maxlength="130" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="searchData.subjectLinkman" maxlength="30" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="searchData.subjectTele" maxlength="11" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="主要产品">
                        <el-select v-model="searchData.subjectMainProduct" @focus="getmainproducts" filterable placeholder="请选择">
                            <el-option v-for="item in mainproducts" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="searchData.subjectCard" minlength="15" maxlength="18" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="行业">
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(city, index) in cities" :label="city.value" :key="index">{{ city.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <!-- <el-form-item label="面积(范围)">
                        <el-input v-model="searchData.muBegin" minlength="1" maxlength="5" show-word-limit placeholder="起始" style="width:110px"></el-input>
                        -
                        <el-input v-model="searchData.muEnd" minlength="1" maxlength="5" show-word-limit placeholder="结束" style="width:110px"></el-input>
                    </el-form-item> -->

                    <el-form-item class="btn">
                        <el-button type="primary" @click="searchSubject()">查询</el-button>
                        <el-button @click="resetValues()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-card class="el-card" shadow="never">
                <el-table :data="SubjectInfoList" style="width: 100%">
                    <el-table-column fixed prop="subjectName" label="主体名称">
                    </el-table-column>
                    <el-table-column prop="subjectLinkman" label="联系人">
                    </el-table-column>
                    <el-table-column prop="subjectTele" label="电话"> </el-table-column>
                    <el-table-column prop="subjectTypeName" label="主体类别">
                    </el-table-column>
                    <el-table-column prop="subjectOrgCode" label="主体组织机构代码">
                    </el-table-column>

                    <el-table-column prop="subjectBase" label="基地"> </el-table-column>
                    <el-table-column prop="subjectAddr" label="主体地址">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="250">
                        <template slot="header">
                            <el-button type="primary" size="medium" @click="AddDialogFormVisible = true">新增</el-button>
                            <el-button type="warning" size="medium" @click="downloadFile">导出</el-button>
                            <el-button type="danger" size="medium" @click="ImportXlsx">导入</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row, '查看')" type="text" size="small">查看
                            </el-button>
                            <el-button type="text" size="small" @click="handleClick(scope.row, '编辑')">编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom">
                    <el-pagination background @size-change="handleSizeChange" @current-change="currentchange" :current-page="paging.pageNum" :page-sizes="[5, 10, 20, 30, 40, 200]" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-dialog title="新增生产主体" :visible.sync="AddDialogFormVisible">
        <el-card>
            <el-tabs v-model="typeClass" stretch>
                <el-tab-pane label="个体户" name="个体户">
                    <Individual @on-close="closeAddModel()" v-if="typeClass === '个体户'" editor="新增" @success="addIndividual"></Individual>
                </el-tab-pane>
                <el-tab-pane label="合作社" name="合作社">
                    <Cooperation @on-close="closeAddModel()" v-if="typeClass === '合作社'" editor="新增" @success="addIndividual"></Cooperation>
                </el-tab-pane>
                <el-tab-pane label="企业" name="企业">
                    <Enterprise @on-close="closeAddModel()" v-if="typeClass === '企业'" editor="新增" @success="addIndividual"></Enterprise>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <!--		<el-button @click="AddDialogFormVisible = false" type="default" class="btn-block" style="margin-top: 15px">-->
        <!--		关闭窗口</el-button>-->
    </el-dialog>
    <el-dialog title="主体详情" :visible.sync="DetailsDialogFormVisible">
        <el-card>
            <Individual v-if="subjectType === 'P0201'" @on-close="closeAddModel()" @success="addIndividual" :editor="editor" :subjectType="subjectType" :subjectFormRow="subjectFormRow"></Individual>

            <Cooperation v-else-if="subjectType === 'P0202'" @on-close="closeAddModel()" @success="addIndividual" :editor="editor" :subjectType="subjectType" :subjectFormRow="subjectFormRow"></Cooperation>

            <Enterprise v-else-if="subjectType === 'P0203'" @on-close="closeAddModel()" @success="addIndividual" :editor="editor" :subjectType="subjectType" :subjectFormRow="subjectFormRow"></Enterprise>

            <Look v-else @success="editIndividual" @on-close="closeDetialsModel" :editor="editor" :subjectType="subjectType" :subjectFormRow="subjectFormRow"></Look>
        </el-card>
    </el-dialog>
</div>
</template>

<script>
import Individual from "./Individual/Individual";
import Cooperation from "./Cooperation/Cooperation";
import Enterprise from "./Enterprise/Enterprise";
import Look from "./Look/Look";

import cityOptions from "@/views/mixins/cityOptions.js";

import {
    convertKey
} from "@/library/index.js";

export default {
    mixins: [cityOptions],
    name: "ProductionBase",
    components: {
        Individual,
        Cooperation,
        Enterprise,
        Look,
    },
    data() {
        return {
            subjectType: "",
            ImportXlsxShow: false,
            townIndex: 0,
            editor: true,
            subjectFormRow: {},
            DetailsDialogFormVisible: false,
            AddDialogFormVisible: false,
            search: {
                planName: "",
                value: "",
            },
            form: {},
            typeClass: "个体户",
            formData: {
                pageNum: 1,
                pageSize: 10,
                subjectVillageId: "",
            },
            searchData: {
                pageNumber: 1,
                pageSize: 10,
                subjectTownId: "",
                subjectVillageId: "",
                checkedCities: [localStorage.getItem("SYS_TYPE")],
                subjectName: "",
                subjectTele: "",
                subjectType: "",
                subjectAddr: "",
                subjectLinkman: "",
                subjectCard: "",
                subjectMainProduct: "",
                muBegin: 0,
                muEnd: ""
            },
            params: {
                pageNumber: 1,
                pageSize: 10,
            },
            options: [],
            VillageOptions: [],
            optionsChildren: [],
            // 主体类型
            type: [],
            SubjectInfoList: [],
            paging: {},
            mainproducts: [],
            value: ''

        };
    },
    created() {
        this.handleCheckedCitiesChange(this.checkedCities);
        this.getSubjectInfoList();
        this.selectData();
        this.getDataBase();
    },
    methods: {
        ImportXlsx() {
            this.ImportXlsxShow = true;
        },

        getmainproducts() {
            this.$axios
                .get("/baseinfo/baseInfo/propertyValue/selectPage", {
                    params: {
                        ptCode: "P13",
                        pageNumber: 1,
                        pageSize: 50,
                    },
                })
                .then((res) => {
                    this.mainproducts = convertKey(res.data.list, {
                        propertyValue: "label",
                        pvCode: "value",
                    });
                });
        },

        getDataBase() {
            this.$axios
                .get("/baseinfo/baseInfo/propertyValue/selectPage", {
                    params: {
                        ptCode: "P02",
                        pageNumber: 1,
                        pageSize: 50,
                    },
                })
                .then((res) => {
                    this.type = convertKey(res.data.list, {
                        propertyValue: "label",
                        pvCode: "value",
                    });
                });
        },
        changeTownCode(TownCode) {
            this.VillageOptions = [];
            this.options.forEach((item) => {
                item.children.forEach((item) => {
                    if (item.value.substring(0, 9) === TownCode) {
                        this.searchData.landVillageCode = "";
                        this.VillageOptions.push(item);
                    }
                });
            });
            console.log(this.VillageOptions);
        },
        changeVillageCode(landVillageCode) {
            this.$set(this.searchData, "landVillageCode", landVillageCode);
            console.log(this.searchData);
        },
        downloadFile() {
            this.params = {
                "subjectInfo.subjectName": this.searchData.subjectName,
                "subjectInfo.subjectType": this.searchData.subjectType,
                "subjectInfo.subjectTownId": this.searchData.subjectTownId,
                "subjectInfo.subjectVillageId": this.searchData.subjectVillageId,
                "subjectInfo.subjectAddr": this.searchData.subjectAddr,
                "subjectInfo.subjectLinkman": this.searchData.subjectLinkman,
                // "subjectInfo.systemType": this.searchData.checkedCities.join(','),
                systemTypeList: this.searchData.checkedCities.join(","),
            };

            this.$confirm("此操作将导出文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: "文件生成导出中...",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.8)",
                    });
                    setTimeout(() => {
                        this.$axios
                            .post("rbac/data/subject/Excel", {
                                params: this.params,
                            })
                            .then((res) => {
                                loading.close();
                                location.href = res.data.imgUrl;
                            });
                    }, 10);
                })
                .catch(() => {});
        },
        closeAddModel() {
            this.AddDialogFormVisible = false;
        },
        closeDetialsModel() {
            this.DetailsDialogFormVisible = false;
        },
        selectData() {
            var json = JSON.parse(
                window.localStorage.getItem("getTreeData/setAsyncVillageData")
            );
            this.options = json[0].children[0].children;
        },
        editIndividual(res) {
            this.DetailsDialogFormVisible = res.visible;
            if (res.code === 200) {
                this.getSubjectInfoList();
            }
        },
        addIndividual(res) {
            // console.log(res);
            this.AddDialogFormVisible = res.visible;
            if (res.code === 200) {
                this.getSubjectInfoList();
            }
        },
        onSearch() {},
        handleClick(row, type) {
            this.subjectType = row.subjectType;
            this.subjectFormRow = row;
            console.log(this.subjectFormRow);
            this.editor = type;
            this.DetailsDialogFormVisible = true;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            if (checkedCount) {
                this.$set(this.searchData, "checkedCities", value);
            } else {
                delete this.searchData.checkedCities;
            }

            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.cities.length;
        },
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            this.getSubjectInfoList(this.params.pageNumber, this.params.pageSize);
        },
        currentchange(pageNumber) {
            this.params = {
                pageNumber: pageNumber,
                pageSize: 10,
                "subjectInfo.subjectName": this.searchData.subjectName,
                "subjectInfo.subjectType": this.searchData.subjectType,
                "subjectInfo.subjectTownId": this.searchData.subjectTownId,
                "subjectInfo.subjectVillageId": this.searchData.subjectVillageId,
                "subjectInfo.subjectAddr": this.searchData.subjectAddr,
                "subjectInfo.subjectLinkman": this.searchData.subjectLinkman,
                // "subjectInfo.systemType": this.searchData.checkedCities.join(','),
                systemTypeList: this.searchData.checkedCities.join(","),
            };

            this.f(this.params);
        },
        getSubjectInfoList(pageNumber = 1, pageSize = 10) {
            let params;
            let systemTypeList = this.searchData.checkedCities.join(",");
            params = {
                pageNumber,
                pageSize,
                systemTypeList,
            };
            this.f(params);
        },
        f(params) {
            this.$fishing.getSubjectInfoList(params).then((res) => {
                this.SubjectInfoList = res.data.list.filter((item) => {
                    // if (item.subjectType == "P0201") {
                    //   item.subjectType = "个体";
                    // } else if (item.subjectType == "P0202") {
                    //   item.subjectType = "合作社";
                    // } else if (item.subjectType == "P0203") {
                    //   item.subjectType = "企业";
                    // }
                    return item;
                });
                delete res.data.list;
                this.paging = res.data;
            });
        },
        searchSubject() {

            let params = {
                pageNumber: 1,
                pageSize: 10,
                "subjectInfo.subjectName": this.searchData.subjectName,
                "subjectInfo.subjectType": this.searchData.subjectType,
                "subjectInfo.subjectTownId": this.searchData.subjectTownId,
                "subjectInfo.subjectVillageId": this.searchData.subjectVillageId,
                "subjectInfo.subjectAddr": this.searchData.subjectAddr,
                "subjectInfo.subjectLinkman": this.searchData.subjectLinkman,
                "subjectInfo.subjectTele": this.searchData.subjectTele,
                "subjectInfo.subjectCard": this.searchData.subjectCard,
                "subjectInfo.subjectMainProduct": this.searchData.subjectMainProduct,

                muBegin: this.searchData.muBegin,
                muEnd: this.searchData.muEnd,

                // "subjectInfo.systemType": this.searchData.checkedCities.join(','),
                systemTypeList: typeof this.searchData.checkedCities === 'undefined' ? ['SS1', 'SS2'].join(",") : this.searchData.checkedCities.join(","),
            };

            if (params["subjectInfo.subjectType"] === 'P0200') {
                params["subjectInfo.subjectType"] = ''
            }

            this.f(params);
        },
        resetValues() {
            this.checkedCities=[localStorage.getItem("SYS_TYPE")],
            this.searchData.subjectName = "";
            this.searchData.subjectType = "";
            this.searchData.subjectIndustry = "";
            this.searchData.subjectTownId = "";
            this.searchData.subjectVillageId = "";
            this.searchData.subjectAddr = "";
            this.searchData.subjectLinkman = "";
            this.searchData.subjectTele = "";
            this.searchData.subjectCard = "";
            this.VillageOptions = [];
            this.searchData.subjectMainProduct = ""
            this.searchData.muBegin = ""
            this.searchData.muEnd = ""
        },
    },
};
</script>

<style lang="scss">
.ProductionBase {
    .form {
        padding: 15px 10px;
    }

    .el-card {
        width: 98%;
        margin: 15px auto 0;

        .bottom {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
        }

        .flex {
            display: flex;
            justify-content: flex-start;
        }
    }
}
</style>
